<template>
  <div class="app-container">
    <!-- 查询和全部删除 -->
    <div class="search-bar">
      <el-input
        v-model="queryParams.originalName"
        placeholder="请输入文件名关键字"
        size="small"
        class="search-input"
        clearable
        @keyup.enter.native="handleSearch"
      ></el-input>
      <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearch">查询</el-button>
      <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDeleteAll" :disabled="fileList.length === 0">全部删除</el-button>
    </div>

    <!-- 文件列表 -->
    <div class="content-card">
      <div class="card-header">
        <div class="header-left">
          <i class="el-icon-document"></i>
          <span class="header-title">文档列表</span>
          <el-tag size="small" type="info" class="file-count"
            >{{ total }} 个文件</el-tag
          >
        </div>
        <div class="header-right">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-refresh"
            @click="handleRefresh"
            :loading="loading"
            class="refresh-btn"
          >
            刷新
          </el-button>
        </div>
      </div>

      <!-- 预览弹窗 -->
      <el-dialog
        title="文件预览"
        :visible.sync="previewVisible"
        width="95%"
        top="2vh"
        :before-close="handlePreviewClose"
        :append-to-body="true"
        :lock-scroll="true"
        :close-on-click-modal="true"
        :close-on-press-escape="true"
        custom-class="preview-dialog"
      >
        <div class="preview-container">
          <iframe
            v-if="previewUrl && !isImageFile && !isTextFile"
            :src="previewUrl"
            frameborder="0"
            :class="['preview-iframe', { 'pdf-iframe': isPdfFile }]"
            style="height: 80vh; min-height: 700px;"
          ></iframe>
          <img
            v-else-if="previewUrl && isImageFile"
            :src="previewUrl"
            class="preview-image"
            alt="文件预览"
            style="max-height: 80vh;"
          />
          <div
            v-else-if="textContent && isTextFile"
            class="preview-text"
            v-html="textContent"
            style="height: 80vh; min-height: 700px; overflow-y: auto;"
          ></div>
          <div v-else class="preview-error">
            <i class="el-icon-warning"></i>
            <p>该文件类型暂不支持预览</p>
          </div>
        </div>
      </el-dialog>

      <div class="table-container">
        <el-table
          v-loading="loading"
          :data="fileList"
          class="custom-table"
          :header-cell-style="{
            background: '#f8f9fa',
            color: '#606266',
            fontWeight: '600',
          }"
          :row-class-name="tableRowClassName"
          element-loading-text="正在加载文件列表..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <el-table-column
            prop="originalName"
            label="文件名"
            min-width="200"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div class="file-name-cell">
                <i
                  :class="getFileIcon(scope.row.originalName)"
                  class="file-icon"
                ></i>
                <span class="file-name">{{ scope.row.originalName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="上传时间"
            width="380"
            align="center"
          >
            <template slot-scope="scope">
              <div class="time-cell">
                <i class="el-icon-time"></i>
                <span>{{ scope.row.createTime }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fileSize"
            label="文件大小"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <div class="size-cell">
                <i class="el-icon-files"></i>
                <span>{{ formatFileSize(scope.row.fileSize) }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220" align="center">
            <template slot-scope="scope">
              <div class="action-buttons">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-view"
                  @click="handlePreview(scope.row)"
                  class="action-btn preview-btn"
                >
                  预览
                </el-button>
                <el-button
                  type="success"
                  size="mini"
                  icon="el-icon-download"
                  @click="handleDownload(scope.row)"
                  class="action-btn download-btn"
                >
                  下载
                </el-button>
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  class="action-btn delete-btn"
                >
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <div class="custom-pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { list, remove, getStats } from "@/api/system/oss";
import request from "@/utils/request";

export default {
  name: "DocumentManage",
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        originalName: '', // 用于模糊查询原文件名
      },
      // 数据列表
      fileList: [],
      total: 0,
      loading: false,
      // 预览相关
      previewVisible: false,
      previewUrl: "",
      isImageFile: false,
      isTextFile: false,
      isPdfFile: false,
      textContent: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取文件图标
    getFileIcon(fileName) {
      const ext = fileName.split(".").pop().toLowerCase();
      const iconMap = {
        pdf: "el-icon-document",
        doc: "el-icon-document",
        docx: "el-icon-document",
        xls: "el-icon-document",
        xlsx: "el-icon-document",
        ppt: "el-icon-document",
        pptx: "el-icon-document",
        txt: "el-icon-document",
        jpg: "el-icon-picture",
        jpeg: "el-icon-picture",
        png: "el-icon-picture",
        gif: "el-icon-picture",
        zip: "el-icon-folder",
        rar: "el-icon-folder",
        mp4: "el-icon-video-camera",
        mp3: "el-icon-headset",
      };
      return iconMap[ext] || "el-icon-document";
    },
    // 表格行样式
    tableRowClassName({ row, rowIndex }) {
      return rowIndex % 2 === 0 ? "even-row" : "odd-row";
    },
    // 获取文件列表
    async getList() {
      this.loading = true;
      try {
        const res = await list(this.queryParams);
        this.fileList = res.rows;
        this.total = res.total;
      } catch (error) {
        this.$message.error("获取文件列表失败");
      } finally {
        this.loading = false;
      }
    },
    // 格式化文件大小
    formatFileSize(size) {
      if (!size || size === 0) return "0 B";
      // 确保size是数字类型
      size = Number(size);
      if (isNaN(size)) return "0 B";

      const units = ["B", "KB", "MB", "GB", "TB"];
      let index = 0;
      while (size >= 1024 && index < units.length - 1) {
        size /= 1024;
        index++;
      }
      return size.toFixed(2) + " " + units[index];
    },
    // 下载文件
    handleDownload(row) {
      request({
        url: "/system/oss/download/" + row.ossId,
        method: "get",
        responseType: "blob",
      })
        .then((response) => {
          const blob = new Blob([response]);
          const link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          link.download = row.originalName;
          link.click();
          window.URL.revokeObjectURL(link.href);
        })
        .catch((error) => {
          this.$message.error("下载文件失败");
        });
    },
    // 删除文件
    handleDelete(row) {
      this.$confirm("确认要删除该文件吗？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await remove([row.ossId]);
            this.$message.success("删除成功");
            this.getList();
          } catch (error) {
            this.$message.error("删除文件失败");
          }
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 刷新列表
    handleRefresh() {
      this.getList();
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    // 预览文件
    async handlePreview(row) {
      // 获取文件扩展名
      const fileExt = row.originalName.split(".").pop().toLowerCase();
      // 支持预览的文件类型
      const previewableTypes = ["pdf", "jpg", "jpeg", "png", "gif", "txt"];

      if (previewableTypes.includes(fileExt)) {
        try {
          this.loading = true;
          const response = await request({
            url: "/system/oss/download/" + row.ossId,
            method: "get",
            responseType: "blob",
          });

          this.isImageFile = ["jpg", "jpeg", "png", "gif"].includes(fileExt);
          this.isTextFile = fileExt === "txt";
          this.isPdfFile = fileExt === "pdf";

          if (this.isTextFile) {
            // 对于TXT文件，直接读取文本内容
            const text = await response.text();
            this.textContent = this.formatTextContent(text);
            this.previewUrl = "";
          } else {
            // 对于其他文件，创建blob URL
            const blob = new Blob([response], {
              type: this.getContentType(fileExt),
            });
            this.previewUrl = URL.createObjectURL(blob);
            this.textContent = "";
          }

          this.previewVisible = true;
        } catch (error) {
          this.$message.error("预览文件失败");
        } finally {
          this.loading = false;
        }
      } else {
        this.$message.warning("该文件类型暂不支持预览");
      }
    },
    // 获取文件类型
    getContentType(fileExt) {
      const typeMap = {
        pdf: "application/pdf",
        jpg: "image/jpeg",
        jpeg: "image/jpeg",
        png: "image/png",
        gif: "image/gif",
        txt: "text/plain",
      };
      return typeMap[fileExt] || "application/octet-stream";
    },
    // 格式化文本内容
    formatTextContent(text) {
      // 将换行符转换为HTML换行标签，并添加适当的样式
      return text
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#39;")
        .replace(/\n/g, "<br>")
        .replace(/\r/g, "")
        .replace(/\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;");
    },
    // 关闭预览
    handlePreviewClose() {
      this.previewVisible = false;
      if (this.previewUrl) {
        URL.revokeObjectURL(this.previewUrl);
        this.previewUrl = "";
      }
      this.isImageFile = false;
      this.isTextFile = false;
      this.isPdfFile = false;
      this.textContent = "";
    },
    // 查询
    handleSearch() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 全部删除
    handleDeleteAll() {
      if (this.fileList.length === 0) {
        this.$message.info('当前无可删除文件');
        return;
      }
      this.$confirm('确认要删除所有文件吗？此操作不可恢复！', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          try {
            const ids = this.fileList.map(f => f.ossId);
            await this.$options.methods.removeFiles(ids);
            this.$message.success('全部删除成功');
            this.getList();
          } catch (error) {
            this.$message.error('全部删除失败');
          }
        })
        .catch(() => {
          this.$message.info('已取消删除');
        });
    },
    // 批量删除方法
    async removeFiles(ids) {
      await remove(ids);
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 24px;
  background: #f5f7fa;
  min-height: calc(100vh - 84px);

  .search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 0 4px;
  }
  .search-input {
    width: 220px;
  }

  .content-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 32px;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border-bottom: 1px solid #e9ecef;

      .header-left {
        display: flex;
        align-items: center;
        gap: 12px;

        i {
          font-size: 24px;
          color: #409eff;
        }

        .header-title {
          font-size: 20px;
          font-weight: 600;
          color: #303133;
        }

        .file-count {
          background: #e3f2fd;
          border: 1px solid #bbdefb;
          color: #1976d2;
          font-weight: 500;
        }
      }

      .header-right {
        .refresh-btn {
          background: #ffffff;
          border: 1px solid #409eff;
          color: #409eff;
          border-radius: 8px;
          padding: 10px 20px;
          font-weight: 500;
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
            background: #f0f9ff;
            border-color: #66b1ff;
            color: #66b1ff;
          }
        }
      }
    }

    .table-container {
      padding: 0 32px 32px;
      overflow-x: auto;

      .custom-table {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        border: 1px solid #e4e7ed;
        min-width: 800px;

        ::v-deep .el-table__empty-block {
          min-height: 200px;

          .el-table__empty-text {
            color: #909399;
            font-size: 14px;
          }
        }

        ::v-deep .el-table__header-wrapper {
          th {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
            color: #606266 !important;
            font-weight: 600 !important;
            border-bottom: 2px solid #dee2e6;
            padding: 16px 0;
            text-align: left;
            border-right: 1px solid #e4e7ed;

            &:last-child {
              border-right: none;
            }
          }
        }

        ::v-deep .el-table__body-wrapper {
          .even-row {
            background-color: #fafbfc;
          }

          .odd-row {
            background-color: white;
          }

          tr {
            transition: all 0.3s ease;

            &:hover {
              background-color: #f0f9ff !important;
              box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
            }

            td {
              padding: 16px 8px;
              border-bottom: 1px solid #f0f0f0;
              vertical-align: middle;
              border-right: 1px solid #f0f0f0;
              text-align: center;

              &:first-child {
                text-align: left;
              }

              &:last-child {
                border-right: none;
              }
            }
          }
        }

        // 响应式处理
        @media (max-width: 768px) {
          ::v-deep .el-table__header-wrapper {
            th {
              padding: 12px 0;
              font-size: 13px;
            }
          }

          ::v-deep .el-table__body-wrapper {
            tr td {
              padding: 12px 0;
            }
          }

          .action-buttons {
            flex-direction: row;
            gap: 6px;
            padding: 0 4px;

            .action-btn {
              padding: 6px 8px;
              font-size: 11px;
              min-width: 48px;
              height: 28px;
              max-width: 58px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 4px;
            }
          }
        }

        .file-name-cell {
          display: flex;
          align-items: center;
          gap: 12px;
          min-width: 0;
          justify-content: flex-start;

          .file-icon {
            font-size: 20px;
            color: #409eff;
            width: 24px;
            text-align: center;
            flex-shrink: 0;
          }

          .file-name {
            color: #303133;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            text-align: left;
            max-width: 300px;
          }
        }

        .time-cell,
        .size-cell {
          display: flex;
          align-items: center;
          gap: 8px;
          color: #606266;
          white-space: nowrap;
          justify-content: center;

          i {
            color: #909399;
            font-size: 14px;
            flex-shrink: 0;
          }

          span {
            white-space: nowrap;
          }
        }

        .action-buttons {
          display: flex;
          gap: 8px;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: center;
          width: 100%;
          padding: 0 8px;

          .action-btn {
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.3s ease;
            border: 1px solid;
            padding: 8px 12px;
            font-size: 12px;
            min-width: 56px;
            height: 32px;
            line-height: 1.2;
            flex: 1;
            max-width: 70px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

            &.preview-btn {
              background: #ffffff;
              color: #409eff;
              border-color: #409eff;

              &:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);
                background: #f0f9ff;
                border-color: #66b1ff;
                color: #66b1ff;
              }
            }

            &.download-btn {
              background: #ffffff;
              color: #67c23a;
              border-color: #67c23a;

              &:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 8px rgba(103, 194, 58, 0.2);
                background: #f0f9f0;
                border-color: #85ce61;
                color: #85ce61;
              }
            }

            &.delete-btn {
              background: #ffffff;
              color: #f56c6c;
              border-color: #f56c6c;

              &:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 8px rgba(245, 108, 108, 0.2);
                background: #fef0f0;
                border-color: #f78989;
                color: #f78989;
              }
            }
          }
        }
      }
    }

    .pagination-container {
      padding: 24px 32px;
      background: #f8f9fa;
      border-top: 1px solid #e9ecef;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 80px;
      flex-wrap: wrap;
      gap: 16px;
      overflow: hidden;

      .custom-pagination {
        width: 100%;
        max-width: 800px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        min-height: 60px;

        ::v-deep .el-pagination {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          gap: 8px;
          width: 100%;
          min-height: 40px;

          .el-pagination__total {
            font-size: 14px;
            color: #606266;
            margin-right: 16px;
            white-space: nowrap;
            flex-shrink: 0;
          }

          .el-pagination__sizes {
            margin-right: 16px;
            flex-shrink: 0;

            .el-select {
              .el-input__inner {
                border-radius: 8px;
                border: 1px solid #dcdfe6;
                transition: all 0.3s ease;
                min-width: 80px;

                &:focus {
                  border-color: #409eff;
                  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
                }
              }
            }
          }

          .btn-prev,
          .btn-next {
            border-radius: 8px;
            transition: all 0.3s ease;
            margin: 0 4px;
            min-width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            &:hover {
              background: #409eff;
              color: white;
              transform: translateY(-2px);
            }

            &:disabled {
              opacity: 0.5;
              cursor: not-allowed;
              transform: none;
            }
          }

          .el-pager {
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 0 8px;
            flex-wrap: wrap;
            justify-content: center;
            flex: 1;
            min-width: 0;

            li {
              border-radius: 8px;
              margin: 0 2px;
              transition: all 0.3s ease;
              min-width: 32px;
              height: 32px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              border: 1px solid #dcdfe6;
              background: white;
              flex-shrink: 0;

              &:hover {
                background: #409eff;
                color: white;
                transform: translateY(-2px);
                border-color: #409eff;
              }

              &.active {
                background: #409eff;
                color: white;
                box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
                border-color: #409eff;
              }

              &.disabled {
                opacity: 0.5;
                cursor: not-allowed;
                transform: none;
              }
            }
          }

          .el-pagination__jump {
            margin-left: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            flex-shrink: 0;

            .el-pagination__editor {
              .el-input__inner {
                border-radius: 8px;
                border: 1px solid #dcdfe6;
                transition: all 0.3s ease;
                width: 50px;
                text-align: center;

                &:focus {
                  border-color: #409eff;
                  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
                }
              }
            }
          }
        }

        // 响应式设计
        @media (max-width: 768px) {
          ::v-deep .el-pagination {
            flex-direction: column;
            gap: 12px;
            padding: 8px 0;

            .el-pagination__total {
              margin-right: 0;
              margin-bottom: 8px;
            }

            .el-pagination__sizes {
              margin-right: 0;
              margin-bottom: 8px;
            }

            .el-pager {
              margin: 8px 0;
              justify-content: center;
              order: 3;

              li {
                min-width: 28px;
                height: 28px;
                font-size: 12px;
                margin: 0 1px;
              }
            }

            .btn-prev,
            .btn-next {
              min-width: 28px;
              height: 28px;
              font-size: 12px;
              order: 2;
            }

            .el-pagination__jump {
              margin-left: 0;
              margin-top: 8px;
              order: 4;

              .el-pagination__editor {
                .el-input__inner {
                  width: 40px;
                  font-size: 12px;
                }
              }
            }
          }
        }

        @media (max-width: 480px) {
          ::v-deep .el-pagination {
            .el-pager {
              li {
                min-width: 24px;
                height: 24px;
                font-size: 11px;
                margin: 0 1px;
              }
            }

            .btn-prev,
            .btn-next {
              min-width: 24px;
              height: 24px;
              font-size: 11px;
            }

            .el-pagination__total {
              font-size: 12px;
            }

            .el-pagination__sizes {
              .el-select {
                .el-input__inner {
                  font-size: 12px;
                  min-width: 60px;
                }
              }
            }
          }
        }

        @media (max-width: 360px) {
          ::v-deep .el-pagination {
            .el-pager {
              li {
                min-width: 20px;
                height: 20px;
                font-size: 10px;
                margin: 0 1px;
              }
            }

            .btn-prev,
            .btn-next {
              min-width: 20px;
              height: 20px;
              font-size: 10px;
            }

            .el-pagination__total {
              font-size: 11px;
            }

            .el-pagination__sizes {
              .el-select {
                .el-input__inner {
                  font-size: 11px;
                  min-width: 50px;
                }
              }
            }

            .el-pagination__jump {
              .el-pagination__editor {
                .el-input__inner {
                  width: 35px;
                  font-size: 11px;
                }
              }
            }
          }
        }
      }
    }
  }
}

// 全局预览弹窗样式
.preview-dialog {
  .el-dialog__header {
    padding: 20px !important;
    border-bottom: 1px solid #ebeef5 !important;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
  }

  .el-dialog__title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #303133 !important;
  }

  .el-dialog__body {
    padding: 0 !important;
    height: 90vh !important;
    max-height: 90vh !important;
  }

  .preview-container {
    height: 100% !important;
    min-height: 700px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: linear-gradient(135deg, #f5f7fa, #c3cfe2) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }

  .preview-iframe {
    width: 100% !important;
    height: 80vh !important;
    min-height: 700px !important;
    border: none !important;
    border-radius: 12px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    background-color: #ffffff !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  }

  .preview-image {
    max-width: 100% !important;
    max-height: 80vh !important;
    width: auto !important;
    height: auto !important;
    border-radius: 12px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  }

  .preview-text {
    width: 100% !important;
    height: 80vh !important;
    min-height: 700px !important;
    padding: 40px !important;
    text-align: left !important;
    color: #303133 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-family: "Courier New", monospace !important;
    background-color: #ffffff !important;
    border-radius: 12px !important;
    overflow-y: auto !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  }

  .preview-error {
    text-align: center !important;
    color: #909399 !important;
    padding: 40px !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;

    i {
      font-size: 56px !important;
      margin-bottom: 20px !important;
      color: #e6a23c !important;
    }

    p {
      font-size: 16px !important;
      margin: 0 !important;
    }
  }
}

// 全局表格样式优化
::v-deep .el-table {
  .el-table__body-wrapper {
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 4px;

      &:hover {
        background: #a8a8a8;
      }
    }
  }
}
</style>